/*-------------------   外部导入   -------------------------------------------------------------------*/
import type { ColumnsType } from 'antd/es/table';
import {
    useSearchParams,
    NavLink,
    useNavigate,
    useLocation
} from "react-router-dom";
import React from "react";
import { Card, Button, Row, Col, Input, Select, Table, Checkbox, DatePicker } from "antd";
import { useState, useEffect } from "react";
// 导入接口
import {
    getCarPayHistory,  // 获取业主车辆费--历史信息
    getCarPayHistoryRecord,  // 获取业主车辆费--历史记录---缴费记录
} from "../../../api/admin";
import type { DatePickerProps } from 'antd';
// 引入样式
import "../../../assets/style/admin.scss";
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import "../../../assets/style/admin.scss";
import { HashRouter } from 'react-router-dom';
// 字体图标
import { PlusOutlined, SearchOutlined, RedoOutlined, CloseOutlined, UndoOutlined } from "@ant-design/icons";
/*-------------------   外部导入   -------------------------------------------------------------------*/



function propertyFee() {
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    // 获取路由信息
    const location: any = useLocation().search;
    const ind: any = location.indexOf("=");
    var feeId = location.slice(ind + 1);
    // 历史数据
    const [historyData, setHistoryData] = useState<any>([]);
    // 缴费记录
    const [historyRecord, setHistoryRecord] = useState<any>([]);

    // 表格类型
    interface DataType {
        key: React.Key;
        title: string;
        dataIndex: string;
    }
    // 用户表格信息
    const columns: ColumnsType<DataType> = [
        {
            title: '缴费ID',
            dataIndex: 'detailId',
            key: "detailId"
        },
        {
            title: '周期(单位:月)',
            dataIndex: 'cycles',
            key: "cycles"
        },
        {
            title: '应收金额(单位:元)',
            dataIndex: 'receivableAmount',
            key: "receivableAmount"
        },
        {
            title: '实收金额(单位:元)',
            dataIndex: 'receivedAmount',
            key: "receivedAmount"
        },
        {
            title: '缴费时间',
            dataIndex: 'createTime',
            key: "createTime"
        },
        {
            title: '缴费起始时间',
            dataIndex: 'startTime',
            key: "startTime"
        },
        {
            title: '缴费结束时间',
            dataIndex: 'endTime',
            key: "endTime"
        },
        {
            title: '状态',
            dataIndex: 'stateName',
            key: "stateName"
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: "remark"
        },
        {
            title: '操作',
            dataIndex: 'feeId',
            key: "feeId",
            render: (text, record) => (
                <div>
                    <Button size="small">申请退款</Button>
                    <Button size="small">折扣</Button>
                </div>
            )
        },
    ];
    /*-------------------   定义数据   -------------------------------------------------------------------*/
    useEffect(() => {
        getCarPayHistory({
            communityId: "2023032658120002",
            feeId: feeId,
            row: 1,
            page: 1,
        }).then(res => {
            console.log(res.data.fees);
            setHistoryData(res.data.fees[0])
        })
        getCarPayHistoryRecord({
            page: 1,
            row: 10,
            communityId: 2023032658120002,
            feeId: feeId,
            startTime: "",
            endTime: "",
        })
            .then(res => {
                console.log(res.data.feeDetails);
                setHistoryRecord(res.data.feeDetails)
            })
    }, [])
    // 返回上一页
    const goBack = () => {
        window.history.go(-1)
    }
    // 开始时间
    const startTime: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    // 结束时间
    const endTime: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };

    return (
        <div className='propertyFee'>
            <Card
                className='top'
                style={{ width: '100%' }}
                title="费用信息"
                extra={<Button onClick={() => { goBack }} type="primary">返回</Button>}
            >
                <Col span={24}>
                    <Row>
                        <Col span={8}>
                            <ul>
                                <li>
                                    <span>费用ID：</span>
                                    <span>{historyData.feeId}</span>
                                </li>
                                <li>
                                    <span>付费对象：</span>
                                    <span>{ }</span>
                                </li>
                                <li>
                                    <span>建账时间：</span>
                                    <span>{historyData.startTime}</span>
                                </li>
                                <li>
                                    <span>批次：</span>
                                    <span>{historyData.batchId}</span>
                                </li>
                                <li>
                                    <span>业主ID：</span>
                                    <span>{ }</span>
                                </li>
                                <li>
                                    <span>业主联系方式：</span>
                                    <span>{ }</span>
                                </li>
                                <li>
                                    <span>固定费：</span>
                                    <span>{historyData.feeTotalPrice}</span>
                                </li>
                            </ul>
                        </Col>
                        <Col span={8}>
                            <ul>
                                <li>
                                    <span>费用标识：</span>
                                    <span>{historyData.feeFlagName}</span>
                                </li>
                                <li>
                                    <span>费用项：</span>
                                    <span>{historyData.feeName}</span>
                                </li>
                                <li>
                                    <span>计费开始时间：</span>
                                    <span>{historyData.endTime}</span>
                                </li>
                                <li>

                                </li>
                                <li>
                                    <span>付费对象：</span>
                                    <span>{historyData.payerObjName}</span>
                                </li>
                            </ul>
                        </Col>
                        <Col span={8}>
                            <ul>
                                <li>
                                    <span>费用类型：</span>
                                    <span>{historyData.feeTypeCdName}</span>
                                </li>
                                <li>
                                    <span>费用状态：</span>
                                    <span>{historyData.stateName}</span>
                                </li>
                                <li>
                                    <span>计费结束时间：</span>
                                    <span>{historyData.deadlineTime}</span>
                                </li>
                                <li>

                                </li>
                                <li>
                                    <span>业主名称：</span>
                                    <span>{ }</span>
                                </li>
                            </ul>
                        </Col>
                    </Row>
                </Col>
            </Card>
            <br />
            <br />
            <Card
                style={{ width: '100%' }}
                title="缴费历史"
            >
                <Col span={24}>
                    <Row>
                        <Col span={12}>
                            <DatePicker onChange={startTime} placeholder='请选择开始时间' />&emsp;
                            <DatePicker onChange={endTime} placeholder='请选择结束时间' />
                        </Col>
                        <Col span={12}>
                            <Button type="primary" icon={<SearchOutlined />}>马上查询</Button>&emsp;
                            <Button type="primary" icon={<UndoOutlined />} style={{ backgroundColor: "#17a2b8" }}>重置</Button>
                        </Col>
                    </Row>
                </Col>
                <br />
                <Table
                    columns={columns}
                    dataSource={historyRecord}
                    bordered
                    pagination={{
                        defaultPageSize: 10,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        // total: historyRecord.length,
                        onChange: (page, pageSize) => {
                            console.log(page, pageSize);
                        },
                        onShowSizeChange: (current, size) => {
                            console.log(current, size);
                        }
                    }}
                />
            </Card>
        </div>
    )
}

export default propertyFee